<template>
	<view class="crowdfunding-recommend">
		<view class="banner">
			<image class="img" :src="dataInfo.head_image" mode="widthFix"></image>
			<view class="icon-back-wrap" @click="Back">
				<image src="../../static/images/left.png" mode=""></image>
			</view>
		</view>
		<view class="crowd-list-wrap">
			<view class="crowd-list">
				<block v-for="(item,index) in dataInfo.product_list" :key="index">
					<view class="crowd-item" @click="toShopDetail(item.product_id)">
						<view class="img-wrap">
							<image :src="item.img_url" mode=""></image>
						</view>
						<view class="item-info-wrap">
							<view class="item-title">
								{{item.name}}
							</view>
							<view class="item-desc">
								{{item.product_desc}}
							</view>
							<view class="operate el-flex">
								<view class="price-wrap">
									<text class="price">￥{{item.price_min}}</text>
								</view>
								<view class="subtn">
									立即购买
								</view>
							</view>
						</view>
					</view>
				</block>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataInfo: {}
			};
		},
		methods: {
			toShopDetail(product_id) {
				if (product_id) {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${product_id}`
					})
				}
			},
			Back() {
				uni.navigateBack(-1)
			},
			getRecommendProduct(id) {
				this.$request.get('/getRecommendProduct', {
					id: id
				}).then((res) => {
					this.dataInfo = res.data.data
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {
			this.getRecommendProduct(e.id)
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.crowdfunding-recommend {
		background: #f5f5f5;
		padding-bottom: 0.1rem;

		.banner {
			width: 100%;
			position: relative;
			margin-bottom: -1.2rem;

			.img {
				width: 100%;
				height: auto;
				display: block;
			}

			.icon-back-wrap {
				position: absolute;
				top: 0;
				left: 0;
				padding: 0.2rem;
				display: inline-block;

				image {
					width: 0.5rem;
					height: 0.5rem;
					display: block;
				}
			}
		}

		.crowd-list-wrap {
			position: relative;

			.crowd-list {
				margin: 0 0.24rem;
				text-align: left;

				.crowd-item {
					padding: 0.24rem;
					margin-bottom: 0.2rem;
					display: flex;
					background: #fff;
					border-radius: .23rem;

					.img-wrap {
						width: 1.89rem;
						height: 1.89rem;

						image {
							width: 1.89rem;
							height: 1.89rem;
							border-radius: .12rem;
						}
					}

					.item-info-wrap {
						flex: 1;
						padding-left: 0.24rem;
						box-sizing: border-box;

						.item-title {
							display: flex;
							align-items: center;
							margin-top: 0.12rem;
							font-size: .28rem;
							color: rgba(0, 0, 0, .87);
						}

						.item-desc {
							font-size: .24rem;
							color: rgba(0, 0, 0, .5);
							margin-top: 0.1rem;
							height: 0.66rem;
							line-height: .32rem;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.operate {
							margin-top: 0.18rem;
							justify-content: space-between;

							.price-wrap {
								flex: 1 1 auto;

								.price {
									color: #ff5934;
									font-size: .32rem;
									font-weight: 700;
									line-height: 1em;
								}
							}

							.subtn {
								flex: none;
								padding: 0.12rem 0.24rem;
								box-sizing: border-box;
								text-align: center;
								color: #fff;
								font-size: .24rem;
								background: linear-gradient(90deg, #ff9264, #ff5934);
								border-radius: .44rem;
							}
						}
					}
				}
			}
		}
	}
</style>